<template>
    <div class="pwdback">
        <head_><h1>密码找回</h1></head_>
        <div class="inp">
            <label for="phone">手机号</label>
            <input
                    type="text"
                    placeholder="请输入手机号"
                    id="phone"
                    v-model="phone"
                    @blur="changepin"
            />
        </div>

        <div class="pin">
            <label for="pin">验证码</label>
            <input v-model="pin" type="text" placeholder="请输入验证码" id="pin"/>
            <button
                    :class="[pincolor === true ? 'button_active' : '']"
                    @click="getpin"
                    :disabled="display"
            >
                {{ pintext }}
            </button>
        </div>

        <div class="inp">
            <label for="newpwd">新密码</label>
            <input
                    v-model="pw"
                    :type="flas ? tests : pass"
                    placeholder="请输入新密码"
                    id="newpwd"
            />
            <van-icon
                    @click="eye_active"
                    :class="flas ? 'eye_active' : ''"
                    name="eye-o"
                    size="0.36rem"
            />
        </div>

        <div class="inp">
            <label for="sure">确认</label>
            <input
                    :type="flas2 ? tests : pass"
                    v-model="surepw"
                    placeholder="再次输入新密码"
                    id="sure"
            />
            <van-icon
                    @click="eye_active2"
                    :class="flas2 ? 'eye_active' : ''"
                    name="eye-o"
                    size="0.36rem"
            />
        </div>

        <div class="submit">
            <button
                    @click="submit"
                    :disabled="submitdisplay"
                    :class="[submitcolor === true ? 'submit_active' : '']">提交
            </button>
        </div>
    </div>
</template>

<script>
    import head_ from "../jingtai_/header";
    import {getCode, pwdback} from "../../request/login_register/login_register";

    export default {
        props: {},
        data() {
            return {
                phone: "",
                pin: "",
                pw: "",
                surepw: "",
                pintext: "获取验证码",
                pincolor: false,
                display: true,
                timerid: null,
                time: 0,
                flas: false,
                pass: "password",
                tests: "text",
                flas2: false,
                submitdisplay: false,
                submitcolor: true,
                regphone: /^1[3-9]\d{9}$/,
                regpw: /^[0-9]{6,18}$/,
            };
        },
        methods: {
            changepin() {
                this.pincolor = true;
                this.display = false;
            },
            getpin() {
                console.log(this.phone)
                getCode({phone: this.phone}).then((res) => {
                    if (res.resultCode === 200) {
                        this.time = 60;
                        this.display = true;
                        this.pintext = `重新获取(${this.time})`;
                        this.timerid = setInterval(() => {
                            this.time--;
                            this.pintext = `重新获取(${this.time})`;
                            if (this.time <= 0) {
                                this.time === 0;
                                clearInterval(this.timerid);
                                this.pintext = "获取验证码";
                                this.display = false;
                            }
                        }, 1000);
                    } else {
                    }
                });
            },
            eye_active() {
                this.flas = !this.flas;
            },
            eye_active2() {
                this.flas2 = !this.flas2;
            },

            submit() {
                console.log("提交")
                if (this.regphone.test(this.phone) === false) {
                    this.$toast.fail("请输入正确的手机号");
                } else if (this.pin.length < 4) {
                    this.$toast.fail("验证码不正确");
                } else if (this.regpw.test(this.pw) === false) {
                    this.$toast.fail("密码格式不正确");
                } else if (this.pw !== this.surepw) {
                    this.$toast.fail("两次密码输入不一致");
                } else {
                    pwdback({
                        phoneNum: this.phone,
                        password: this.pw,
                        confirmPassword: this.surepw,
                        code: this.pin,
                    }).then((res) => {
                        console.log(res);
                        if (res.resultCode === 200) {
                            this.$toast.success({
                                message: "找回成功",
                                duration: 2000,
                                onClose: (res) => {
                                    return this.$router.push("/login");
                                },
                            });
                        }
                    });
                }
            },
        },
        components: {head_},
    };
</script>

<style scoped lang="less">
    .pwdback {
        padding: 0 0.24rem;

        .title {
            display: flex;
            align-items: center;
            height: 0.88rem;
        }

        span {
            flex: 1;
            text-align: center;
            font-size: 0.34rem;
            font-weight: bolder;
        }

        .inp {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.29rem;
            position: relative;

            label {
                font-size: 0.26rem;
                font-weight: bolder;
            }

            input {
                width: 5.48rem;
                height: 0.66rem;
                font-size: 0.22rem;
                padding-left: 0.19rem;
                border: 2px solid #e4e4e4;
                border-radius: 0.04rem;

                &::placeholder {
                    color: #999;
                }
            }

            .van-icon-eye-o {
                position: absolute;
                top: 0.2rem;
                right: 0.19rem;
            }

            .eye_active {
                color: #2094ff;
            }
        }

        .pin {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.29rem;

            label {
                font-size: 0.26rem;
                font-weight: bolder;
            }

            input {
                width: 2.98rem;
                height: 0.66rem;
                font-size: 0.22rem;
                padding-left: 0.19rem;
                margin-left: 0.2rem;
                border: 2px solid #e4e4e4;
                border-radius: 0.04rem;

                &::placeholder {
                    color: #999;
                }
            }

            button {
                width: 2rem;
                height: 0.66rem;
                font-size: 0.22rem;
                color: #999;
                background-color: #f2f2f2;
                text-align: center;
                line-height: 0.66rem;
                outline: none;
                border: none;
            }

            .button_active {
                background: #43a5ff;
                color: #fff;
            }
        }

        .submit {
            margin-top: 1.29rem;
            text-align: center;

            button {
                width: 5rem;
                height: 1rem;
                color: #999;
                background: #f2f2f2;
                font-size: 0.34rem;
                text-align: center;
                line-height: 1rem;
                border: none;
                outline: none;
            }

            .submit_active {
                background: #43a5ff;
                color: #fff;
            }
        }
    }
</style>
